<template>
  <div style="display: flex">
    <div class="left">
      <el-col :span="24">
        <el-menu
          default-active="/index"
          class="el-menu-vertical-demo"

          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          router
          style="height: 700px"
        >
          <el-menu-item index="1">
            <i class="el-icon-menu"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>内容管理</span>
            </template>
            <el-menu-item-group>

              <el-menu-item index="/addArticle">发布文章</el-menu-item>
              <el-menu-item index="/index">内容列表</el-menu-item>
              <el-menu-item index="1-3">评论列表</el-menu-item>
              <el-menu-item index="1-3">素材管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">导航四</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </div>
    <div class="right">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.header {
  width: 1000px;
  height: 80px;
  /* border: 1px solid #000; */
}
.left {
  width: 250px;
  height: 700px;
}
</style>